<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="View star history of GitHub repositories" />
  <link rel="icon" href="./favicon.ico" />
  <link rel="apple-touch-icon" href="./favicon.ico" />
  <link rel="bookmark" href="./favicon.ico" />
  <link rel="shortcut icon" href="./favicon.ico" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
    integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"
    rel="preload" />
  <link rel="stylesheet" rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/notie/dist/notie.min.css">

  <style>
    text {
      font: 12px sans-serif;
    }

    svg {
      display: block;
    }

    #chart {
      visibility: hidden;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin: auto;
      padding: 10px;
      max-width: 800px;
      min-width: 70%;
      min-height: 50vh;
      /* height: 75vh; */
    }

    #button-group {
      visibility: hidden;
    }

    .search-container {
      min-width: 70%;
      max-width: 800px;
      display: inline-block;
    }
  </style>
  <title>Star history</title>

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56506279-5"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-56506279-5');
  </script>
</head>

<body>
  <!-- Navigation bar -->
  <nav class="navbar is-dark" style="z-index: 1">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="https://t9t.io">
          <img src="./header.ico" width="28" height="28" />
        </a>
        <a class="navbar-item" href="https://chrome.google.com/webstore/detail/iijibbcdddbhokfepbblglfgdglnccfn">
          <strong>Chrome Extension</strong>
        </a>

        <div class="navbar-burger burger" data-target="navbarExampleTransparentExample">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <div id="navbarExampleTransparentExample" class="navbar-menu">
        <div class="navbar-end">
          <a id="addTokenBtn" class="navbar-item">
            <strong>Add access token</strong>
            <!-- <span class="icon">
                  <i class="far fa-setting"></i>
                </span> -->
          </a>
        </div>
      </div>
    </div>
    </div>
  </nav>

  <dev class="section">
    <div class="container has-text-centered">      
      <div class="search-container">
        <div class="field has-addons">
          <div class="control is-expanded">
            <input class="input is-dark" type="text" id="repo" name="repo" placeholder="timqian/star-history">
          </div>
          <p class="control">
            <button class="button is-dark is-outlined" id="theBtn">
              View star history
            </button>
          </p>

        </div>
      </div>
      
    </div>
    <div class="container has-text-centered">
      <div id="chart">
        <svg></svg>
      </div>
      <br />
      <div id="button-group" class="buttons is-pulled-right">
        <button id="clearBtn" class="button is-danger">Clear the result</button>
        <button id="shareBtn" class="button is-success">Share the result</button>
      </div>
    </div>
  </dev>

  <!-- Footer -->
  <footer class="footer" style="background-color:white">
    <div class="container">
      <hr style="background-color:#dbdbdb; height: 1px" />
      <div style="float:left">
        Built by
        <a href="https://twitter.com/tim_qian"><span
            class="tag is-info is-rounded"><strong>@tim_qian</strong></span></a>
      </div>
      <div style="float: right">

        <a class="icon button is-white" href="https://github.com/timqian/star-history">
          <i class="fab fa-github"></i>
        </a>
        <a class="icon button is-white" href="https://twitter.com/tim_qian">
          <i class="fab fa-twitter"></i>
        </a>
        <a class="icon button is-white" href="https://raw.githubusercontent.com/timqian/images/master/3811553342733_.pic.jpg">
          <i class="fab fa-weixin"></i>
        </a>
        <a class="icon button is-white" href="mailto:timqian@t9t.io">
          <i class="fas fa-envelope"></i>
        </a>
      </div>
    </div>
  </footer>

  <div class="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p id="modalCardTitle" class="modal-card-title">Add GitHub access token</p>
        <button id="closeModalBtn" class="delete" aria-label="close"></button>
      </header>
      <section class="modal-card-body">
        <p>Star-history use GitHub API to retrieve repository metadata. You may see this page because you have hit the
          <a href="https://developer.github.com/v3/#rate-limiting">GitHub API rate limit</a>. </p>
        <br />
        <p>Star-history will need your <a href="https://github.com/settings/tokens">personal access token</a> to unlimit
          it. If you don't already have one, <a href="https://github.com/settings/tokens/new">create one</a>, and paste
          it into the textbox below (no scope to your personal data is needed)</p>

        <br />

        <label class="label">access token (will be stored in your local storage)</label>
        <input class="input" id="tokenInput" placeholder="90c6b8218dae4122b07b4a0fae252c619a08941b" />
        <br />
        <br />
        <button id="saveTokenBtn" class="button is-success is-pulled-right">Save</button>
      </section>
      <!-- <footer class="modal-card-foot"> -->
      <!-- </footer> -->
    </div>
    <!-- <button class="modal-close is-large" aria-label="close"></button> -->
  </div>

  <script type="text/javascript" src="./src/index.js" charset="utf-8"></script>
</body>

</html>
